<!--
 * @Author: your name
 * @Date: 2021-01-07 14:02:36
 * @LastEditTime: 2021-01-12 19:17:06
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \solaxcloud\src\views\test\deviceTest\deviceTest.vue
-->
<template>
    <div class="test-deviceTest-main-box">
        <div class="search-box">
            <div class="search-box-sub">
                <span class="lable-text">{{$t('salePage.wifiSN')}}</span>
                <el-input v-big v-model="wifiSN" clearable></el-input>
            </div>
            <div class="search-box-sub">
                <span class="lable-text">{{$t('servicechange.countryName')}}</span>
                <el-input v-model="countryName" clearable></el-input>
            </div>
            <div class="search-box-sub">
                <el-button type="primary" @click='query' >{{$t('query')}}</el-button>
            </div>
        </div>
        <baseTable v-loading="loading"  row-key='sid' :data="dataRows" border  stripe @selection-change="handleSelectionChange($event)"  :column='column' :select='true'>
            <template #cardType="{data}">
              {{comm.returnCode(dictCodes.CARD_TYPE,data.cardType,'value','code')}}
            </template>
            <template #status="{data}">
              {{comm.returnCode(dictCodes.TEST_FINISH_STATUS,data.status,'value','code')}}
            </template>
            <template #option="{data}">
                <div class="option-box">
                    <el-popconfirm
                        :title="$t('test.test_finish_cardStatus_change')"
                        :confirm-button-text="$t('sure')"
                        :cancel-button-text="$t('cancel')"
                        @confirm='gprsChangeCardStatus(data)'
                    >
                        <el-button size='small' type="primary" icon="iconfont icon-swap" slot="reference"  :title='$t("devWifi.unbundling")'></el-button>
                    </el-popconfirm>
                </div>
            </template>
        </baseTable>
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
        </el-pagination>
    </div>
</template>

<script>
import baseTable from '../../components/common/baseTable'
export default {
    components: {
        baseTable,
    },
    props: {

    },
    data() {
        return {
            dictCodes:{},
            wifiSN:'',
            countryName:'',
            loading:false,
            dataRows:[],
            column:[{
                title: this.$t('servicechange.wifiSN'),
                value: 'wifiSN',
                slot: 'wifiSN',
            },{
                title: 'HOST',
                value: 'oriMqttHost',
            },
            {
                title: 'PORT',
                value: 'oriMqttPort',
                slot: 'port',
            },{
                title: this.$t('alarmpush.remark'),
                value: 'remark',
                slot: 'remark',
            },
            {
                title: this.$t('country'),
                value: 'countryName',
                slot: 'countryName',
            }],
            selectDataList:[],
            size:10,
            current:1,
            total:0
        };
    },
    computed: {

    },
    watch: {

    },
    created() {

    },
    mounted() {
        this.deviceTestGetPage()
    },
    methods: {
        async gprsChangeCardStatus(data){
            let res = await this.API.gprsChangeCardStatus({
                wifiSn:data.wifiSN,
                id:data.sid,
            })
            if(this.comm.showMsg(res.success)){
                this.deviceTestGetPage()
            }
        },
        async deviceTestGetPage(){
            this.loading = true
            let res = await this.API.mqttConfigGetPage({
                wifiSN:this.wifiSN,
                countryName:this.countryName,
                size:this.size,
                current:this.current,
            })
            this.dataRows = res.rows
            this.total = res.total
            this.loading = false
        },
        query(){
            this.current = 1
            this.deviceTestGetPage()
        },
        handleSelectionChange(data){
            this.selectDataList = data
        },
        handleSizeChange(val) {
          this.size = val
          this.current = 1
          this.deviceTestGetPage()
        },
        handleCurrentChange(val) {
          this.current = val
          this.deviceTestGetPage()
        },
    },
};
</script>

<style  lang="less" scoped>

</style>
